<template>
  <div style="height: 340px; padding: 0px">
    <el-container class="container" style="height: 340px; padding: 0px">

        <div class="m-header" style="width:100%;">
          <!-- 单个块 -->
          <div
            class="header-block"
            v-for="(item, i) in switchArr"
            :key="i"
            :class="index == item.name ? 'h-acitve' : ''"
            @click="changeIndex(i)"
          >
            <!-- 图片 -->
            <img
              :src="require('@/assets/images/exchange_' + i + '.svg')"
              alt=""
              class="header-img"
            />
            <!-- 字部分 -->
            <div>

              <div class="h-name">{{ item.name }}</div>
            </div>
          </div>
        </div>


    </el-container>





  </div>
</template>

<script>

export default {

  data() {
    return {
      index: "批量分析", //默认选中项
      switchArr: [

        { count: 1, name: "批量分析" },
        { count: 2, name: "实时分析" },

      ],
      // 显示搜索条件



    };
  },

  methods: {
    // 更改选中项
    changeIndex(i) {
      this.index = this.switchArr[i].name;
     this.open = false;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    cancel() {
      this.open = false
    },

  },
  mounted() {
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
.switch-board {
  height: 100%;
   width: 100%;
  .container {
    height: 100%;
    background: #dde4ee;
    padding: 10px;
     width: 100%;
    // 头部
    .m-header {
      position: relative;
      display: flex;
      width: 100%;
    }
    //   底部
    .table-main {
      height: 100%;
      margin-top: 10px;
      padding: 16px;
      background: #fff;
      box-shadow: 0 0 40px 0 rgb(0 0 0 / 8%);
      border-radius: 4px;
    }
  }
  .app-container {
    padding: 0;
    height: 100%;
  }
}
</style>
